 <!-- 溢出隐藏 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>溢出隐藏</title>
    <style>
      div{
        margin:100px auto;
        width: 150px;
        height: 60px;
        background: skyblue;
        overflow: hidden; 
        /*溢出隐藏*/
        white-space: nowrap; 
        /* 规定文本不进行换行 */
        text-overflow:ellipsis; 
        /* 当对象文本溢出时显示省略标记(.....) */
      }
    </style>
  </head>
  <body>
    <div>
        今天天气真好!今天天气真好!今天天气真好!今天天气真好!今天天气真好!今天天气真好!今天天气真好!今天天气真好!
    </div>
  </body>
</html>

<!-- 清除浮动 -->
当父级元素不设置高度时，高度由内容增加自适应高度，而当子元素全部都设置为float的时候，子元素会脱离标准流，不占位，父级检测不到
子元素高度，父级高度为0，下面的元素会顶上去造成页面塌陷，为了兼容性需要加上zoom:1


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动</title>
    <style>
        .box{
            background-color: skyblue;
            overflow: hidden;
            zoom: 1;
        }
        /* 给父级元素添加overflow:hidden 以及zoom:1 清除浮动 */
        .kid{
            width: 100px;
            heigth:100px;
            float:left;
        }
        .kid1{
            background-color: yellow;
        }
        .kid2{
            background-color: orange;
        }
        .wrap{
            width: 300px;
            height: 150px;
            background-color: blue;
            color: white;
        }
    </style>

</head>
<body>
    <div class="box">
        <div class="kid kid1">子元素1</div>
	    <div class="kid kid2">子元素2</div>
    </div>
    <div class="wrap">其他部分</div>

</body>
</html>


<!-- 解决外边距塌陷问题 -->
父级元素内部有子元素时如果给子元素添加margin-top样式 那么父级元素也会跟着下来，造成外边距塌陷,需要给父元素加上overflow：hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解决外边距塌陷问题</title>
    <style>
        .box{
            background:skyblue;
        }
        .kid{
            margin-top: 20px;
            width: 100px;
            height: 100px;
            background:yellow;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="kid">子元素1</div>
    </div>
</body>
</html>